<template>
	<view ref="QS-Input" class="QS-Input" :class="getClass" :style="getStyle">
		<!-- 
		 :focus="nFocus" -->
		<textarea v-if="type == 'textarea'" class="qs-n-input" :class="getCompClass_input" :style="getCompStyle_input"
			:value="val" @input="change" :auto-height="getAutoHeight" :placeholder="placeholder" :disabled="disabled"
			:placeholder-style="placeholderStyle" :placeholder-class="placeholderClass" :maxlength="getMaxlength"
			:cursor-spacing="getCursorSpacing" :confirm-type="confirmType" :confirm-hold="confirmHold"
			:selection-start="getSelectionStart" :selection-end="getSelectionEnd" :cursor="getCursor"
			:adjust-position="getAdjustPosition" @blur="blurFn" @focus="focusFn">
		  </textarea>
		<input v-else class="qs-n-input" :class="getCompClass_input" :style="getCompStyle_input" :type="type"
			:value="val" @input="change" :placeholder="placeholder" :disabled="disabled"
			:placeholder-style="placeholderStyle" :placeholder-class="placeholderClass" :maxlength="getMaxlength"
			:cursor-spacing="getCursorSpacing" :confirm-type="confirmType" :confirm-hold="confirmHold"
			:selection-start="getSelectionStart" :selection-end="getSelectionEnd" :cursor="getCursor"
			:adjust-position="getAdjustPosition" @blur="blurFn" @focus="focusFn">
		</input>
	</view>
</template>

<script>
	import QSComponentMixin from '../../mixins/QS-Components-Mixin.js';
	import QSFormElMixin from '../../js/QS-Form/mixins/QS-Form-El-Mixin.js';
	import QSInputMixin from './mixin.js';
	let props;
	try {
		props = require('@/QS-UI-CONFIG/components/QS-Input/js/props.js');
	} catch (e) {
		//TODO handle the exception
		props = {};
	}
	const componentType = 'QS-Input';
	const QSComponentMixinRes = QSComponentMixin({
		componentType,
		nodeName: '.QS-Input'
	});
	const QSFormElMixinRes = QSFormElMixin({
		componentType
	});
	const QSInputMixinRes = QSInputMixin();

	export default {
		mixins: [
			QSComponentMixinRes.mixin,
			QSFormElMixinRes.mixin,
			QSInputMixinRes.mixin
		],
		props: {
			// #ifdef MP-ALIPAY
			...QSComponentMixinRes.props,
			...QSInputMixinRes.props,
			...QSFormElMixinRes.props,
			// #endif
			...props,
		},
	};
</script>

<style scoped>
	.QS-Input {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		white-space: normal;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-wrap: nowrap;
		/* #endif */
		flex-direction: row;
		align-items: center;
		transition-property: border-color;
		transition-duration: .3s;
	}

	.qs-n-input {
		flex: 1;
		/* #ifdef MP-ALIPAY */
		background-color: rgba(255, 255, 255, 0);
		/* #endif */
		transition-property: border-color;
		transition-duration: .3s;
	}
</style>
